
<template>
  <div>
    <!--头部-->
    <Header @scrollTitle="scrollTitle" :chooseValue=4></Header>
    <!--banner end-->
    <div class="jqgk" style="background:#FFF5E0">
      <div class="contai" style="max-width:1197px;">
        <div class="top_tit">
          <span class="titleFont" id="headline" v-if="pcshow">風俗文化</span>
          <span class="titleFont" id="headline" style="font-size:36px" v-if="!pcshow">風俗文化</span>
          <div style="text-align:left;margin:0px">
            <div class="travel_con">
              <div class="">

                <!-- 图片显示 -->
                <div style="height:105px" v-if="pcshow"></div>
                 <div style="height:50px" v-if="!pcshow"></div>
                <el-row style="margin-left:30px;margin-right:30px">
                   <a-spin :spinning="spinning" :delay="delayTime">
                  <div v-for="item in dataList" :key="item.key">
                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
                      <div v-if="pcshow" class="showPicture" :style="{ float:item.position }">
                        <img :src="item.url" alt="...." class="sceneryImgSize" />
                        <div class="sceneryFontSize">{{item.title}}</div>
                        <span class="sceneryDescFontSize">{{item.introduce}}</span>
                        <button class="sceneryBtn" @click="seeInfo(item)">続きを見る</button>
                      </div>
                      <!--  手机端 -->
                      <div v-if="!pcshow" class="showPicture" :style="{ float:item.position }">
                        <img :src="item.url" alt="...." />
                        <div class="sceneryFontSize">{{item.title}}</div>
                        <span class="sceneryDescFontSize" style="font-size:14px">{{item.introduce}}</span>
                        <button class="sceneryBtn" @click="seeInfo(item)">続きを見る</button>                      
                      </div>
                    </el-col>
                  </div>
                   </a-spin>
                </el-row>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <Footer></Footer>
  </div>
</template>


<script>
import Header from "./header";
import Footer from "./footer";
import { getCultureCustomList } from "../request/api";
export default {
  components: { Header, Footer },
  data() {
    return {
      choseValue: 1,
      pcshow: false,
      styletable: { background: "#F2DCCA" },
      mapStyle: { background: "#FFF5E0" },
      dataList: [],
      spinning:true,
      delayTime: 500,
    };
  },
  beforeCreate() {},
  created() {
    if (this._isMobile()) {
      this.pcshow = false;
    } else {
      this.pcshow = true;
    }
  },

  mounted() {
    this.getCultureCustomListFunction()
  },

  methods: {
    //文化获取
    getCultureCustomListFunction(){
      getCultureCustomList(this.HOST)
      .then(response => {
        this.spinning =true
        this.dataList = response.data.map(function(currentValue, index) {
          index % 2 == 0 ? (currentValue.position = "left") : (currentValue.position = "right")
          return currentValue;
        })
        this.spinning =false
      })
      .catch(error => {});
    },
    //判断是PC端还是手机端
    _isMobile() {
      let flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
      return flag;
    },
    //菜单选择
    tabSelect(e) {
      let value = e.target.dataset.index;
      this.choseValue = value;
    },
    //详情()
    seeInfo(infoid){
     this.$router.push({
        path: "/customsInfomation",
        query:{           
          id:infoid,
        }
      });   
    },
     //描点跳转
    scrollTitle() {
      var PageId = document.querySelector("#headline");
      window.scrollTo({
        top: PageId.offsetTop - 40,
        behavior: "smooth"
      });
    }
  },
};
</script>
<style >
.tra_tab {
  font-size: 28px;
  font-family: "Source Han Sans CN";
  font-weight: bold;
  color: #840207;
  display: inline-block;
  width: 193px;
  height: 67px;
  text-align: center;
  line-height: 67px;
  cursor: pointer;
}
.tra_tab_mobile {
  font-size: 14px;
  font-family: "Source Han Sans CN";
  font-weight: bold;
  color: #840207;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  padding: 10px;
}
.tra_tab_line_mobile {
  display: block;
  width: 100%;
  height: 2px;
  background: #840207;
  opacity: 0.1;
}
.tra_tab_line {
  display: block;
  width: 100%;
  height: 8px;
  background: #840207;
  opacity: 0.1;
}
.titleFont {
  font-size: 42px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #840207;
  line-height: 36px;
}
.sceneryImgSize {
  width: 542px;
  height: 359px;
}
.sceneryFontSize {
  font-size: 24px;
  font-family: "Source Han Sans CN";
  font-weight: bold;
  color: #840207;
  padding: 18px 0px 24px 0px;
}
.showPicture {
  display: flex;
  flex-direction: column;
  
}
.sceneryDescFontSize {
  font-size: 18px;
  font-family: "Source Han Sans CN";
  font-weight: 400;
  height:120px;
  color: #484848;
  line-height: 30px;
  text-align: left;
  padding-right: 31px;
  overflow: hidden;
  text-overflow:ellipsis;
}
.sceneryBtn {
  font-size: 18px;
  font-family: "Source Han Sans CN";
  font-weight: 400;
  color: #ffffff;
  width: 126px;
  height: 44px;
  background: #840207;
  border:none;
  margin:25px 0px 50px
}
</style>
